<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>例子</title>
    <script src="http://apps.bdimg.com/libs/underscore.js/1.7.0/underscore-min.js"></script>
    <script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
    <script src="http://apps.bdimg.com/libs/backbone.js/1.1.2/backbone-min.js"></script>

</head>
<body>
    <div class="container" id="page-issue-list">
       <a href="#page1">
       	 <h1>问题列表</h1>
       </a>
       
    </div>

    <div class="container" id="page-issue-create">
		<a href="#page2">       
        	<h1>新建问题</h1>
        </a>
    </div>

    <div class="container" id="page-issue-edit">
        <a href="#page3">
        	<h1>编辑问题</h1>
        </a>	
    </div>
<script type="text/javascript">
	var AppRouter = Backbone.Router.extend({

		routes:{
			"page1":'showpage1',
			"page2":"shoupage2",
			"page3":"shoupage3"
		},	
		initialize:function(){
			$("#page-issue-list").hide();
			$("#page-issue-create").hide();
			$("#page-issue-edit").hide();	
		},		
		
		showpage1:function(){

			$("#page-issue-list").show();
			$("#page-issue-create").hide();
			$("#page-issue-edit").hide();
		},
		shoupage2:function(){
			$("#page-issue-list").hide();
			$("#page-issue-create").show();
			$("#page-issue-edit").hide();
		},
		shoupage3:function(){
			alert()
			$("#page-issue-list").hide();
			$("#page-issue-create").hide();
			$("#page-issue-edit").show();
		},
	})
	var app = new AppRouter();
	Backbone.history.start()
</script>
</body>
</html>